<template>
  <view>
      <!-- 分类 ——最新热门 -->
    <!-- UNI 分段器组件 -->
    <view class="category_tab_title">
      <view class="tutke_inner">
        <uni-segmented-control
          :current="current"
          :values="items.map(v => v.title)"
          @clickItem="onClickItem"
          style-type="text"
          active-color="#d4237a"
        ></uni-segmented-control>
      </view>

      <view class="category_icon iconfont iconsearch"></view>
    </view>
    <!-- 分段器结束 -->
    <!-- 图片区 -->
    <scroll-view class="imgBox"  enable-flex scroll-y @scrolltolower="handlescrolltolower"> 
      <view class="item_img" v-for="item in imgList" :key="item.id">
        <image class="img" :src="item.thumb" mode="widthFix"></image>
      </view>
    </scroll-view>
  </view>
</template>
<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
export default {
  components: {
    uniSegmentedControl
  },
  data() {
    return {
      /* 分段器数据 */
      items: [
        { title: "最新", order: "new" },
        { title: "热门", order: "hot" }
      ],
      current: 0,
      /* 请求参数 */
      params: {
        limit: 30,
        skip: 0,
        order: "new"
      },
      imgList: [],
      /* 页面的ID */
      id: "",
      /* 是否获取数据 */
      ifGetList:true
    };
  },
  onLoad(e) {
    // console.log(e.id);
    this.id = e.id;
    this.getList();
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
        }
    //    else{
    //       /* 点击的是相同的标题 */
    //       return
    //   }  
      /* 点击标题时切换标题与 order字段 */
      this.params.order = this.items[e.currentIndex].order;
      this.imgList = []
      this.params.skip = 0
      this.ifGetList =true
      this.getList();
    },
    async getList() {
      const resa = await this.http({
        url: `http://157.122.54.189:9088/image/v1/vertical/category/${this.id}/vertical`,
        data: this.params
      });
        console.log(resa.data.res.vertical);
           console.log(this.params.order);
      //console.log(resa.data.resa.vertical);
      /* 判断有没有更多数据 */
      if(resa.data.res.vertical.length === 0){
          this.ifGetList =false 
             uni.showToast({
                  title:"没有更多数据了",
                  icon:"none"
              })
              return
      }
     // console.log(resa);
      this.imgList =[...this.imgList,... resa.data.res.vertical];

    },
    /* 滚动到底部事件 */
    handlescrolltolower(){
          if(this.ifGetList){
                this.params.skip += this.params.limit
            this.getList()
          }else{
              uni.showToast({
                  title:"没有更多数据了",
                  icon:"none"
              })
          }
    }
    /*  */
  }
};
</script>
<style  lang="scss" scoped>
.category_tab_title {
  position: relative;
  .tutke_inner {
    width: 60%;
    margin: 0 auto;
  }
  .category_icon {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
  }
}
.imgBox {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 40px);
  .item_img {
    width: 33.3%;
    border: 3rpx solid #fff;
  }
}
</style> 

